<script setup>
import { ref, onMounted, computed } from "vue";

let props = defineProps({
  ip: String,
  ports: Array,
  vul: Array,
});

const portShowLimit = ref(13)
const show = ref(true);
const childHeight = ref(0);
const childHeightPx = computed(() => {
  return `${childHeight.value}px`;
});

/**@type {import('vue').Ref<HTMLDivElement> }*/
const rootDiv = ref();

onMounted(() => {
  requestAnimationFrame(getChildHeight)
});

function getChildHeight() {
  childHeight.value = 0;
  for (let i = 0; i < rootDiv.value.children.length; i++) {
    childHeight.value += rootDiv.value.children[i].clientHeight;
  }
  console.log(childHeight.value)
}

const portCount = computed(() => props.ports?.length || 0);
const vulCount = computed(() => props.vul?.length || 0);

const isPortsExpanded = ref(false);
const isVulExpanded = ref(false);

const togglePorts = () => {
  isPortsExpanded.value = !isPortsExpanded.value;
  // 子元素被渲染到界面上后重新获取高度
  requestAnimationFrame(getChildHeight)
};

const toggleVul = () => {
  isVulExpanded.value = !isVulExpanded.value;
  // 子元素被渲染到界面上后重新获取高度
  requestAnimationFrame(getChildHeight)
};
</script>

<template>
  <div
    class="more-info-root"
    ref="rootDiv"
    :class="{
      'show-info': show,
      'hide-info': !show,
    }"
  >
    <div class="more-info-header" @click="show = !show">
      <div
        style="margin-left: 2%; transition: all 0.3s ease-in-out"
        :class="{ 'show-info-icon': !show }"
      >
        <img src="../assets/images/polygon.png" style="max-height: 100%" />
      </div>
      <div style="margin-left: 1%; font-size: 18px; color: #32417c">
        {{ props.ip }}
      </div>

      <div class="more-info-counts">
        <span> 端口数：{{ portCount }} </span>
        <span style="margin-left: 10px">漏洞数：{{ vulCount }}</span>
      </div>
    </div>

    <div v-if="ports.length > 0" class="more-info-text-header">
      <div></div>
      <div style="flex-grow: 1; text-align: center">端口</div>
      <div></div>
      <div v-show="ports.length > portShowLimit" style="text-align: right" class="scan-to-info" @click="togglePorts">{{ isPortsExpanded ? '隐藏': '更多' }}</div>
    </div>
    <div
        v-if="ports.length > 0"
        class="more-info-port"
    >
      <div
        v-for="num in props.ports"
        style="
          width: 100%;
          height: 100%;
          display: grid;
          place-items: center;
          border: 0.5px solid #dfe1ee;
        "
      >
        {{ num }}
      </div>
    </div>
    <!-- 漏洞部分 -->
    <div v-if="vul.length > 0" class="more-info-text-header">
      <div></div>
      <div style="flex-grow: 1; text-align: center">漏洞</div>
      <div></div>
      <div style="text-align: right" v-show="vul.length > 2" class="scan-to-info" @click="toggleVul">{{ isVulExpanded ? '隐藏' : '更多' }}</div>
    </div>
    <div v-if="vul.length > 0" style="height: fit-content;">
      <!-- 根据 expanded 的值决定显示的漏洞数量 -->
      <div
        v-for="vul in (isVulExpanded ? props.vul : props.vul.slice(0, 2))"
        style="
          min-height: 40px;
          min-width: 40px;
          display: grid;
          place-items: center;
          border: 0.5px solid #dfe1ee;
          color: #32417c;
        "
      >
        {{ vul }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.more-info-header {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
}

.more-info-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: white;
  border-radius: 15px;
  transition: height 0.5s ease-in-out;
  overflow: hidden;
}

.show-info {
  height: v-bind(childHeightPx);
}

.hide-info {
  height: 27px;
}

.show-info-icon {
  transform: rotate(-90deg);
}

.scan-to-info {
  cursor: pointer;
  background-color: #f4f3fb;
  color: #808080;
}

.scan-to-info:hover {
  color: #4ea2ee; /* 鼠标悬停时的文字颜色 */
}

.more-info-counts {
  margin-left: 10px;
  font-size: 18px;
  color: #32417c
}

.more-info-port {
  width: 100%;
  min-height: 50px;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(v-bind(portShowLimit), 1fr);
}

.more-info-text-header {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 45% 5% 1fr 5%;
  min-height: 20px;
  background-color: #f4f3fb;
}

</style>